<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="shopMall">
    <div class="shopDetail">
      <p class="title">商品列表</p>
    </div>
    <div class="shopList">
      <div class="item" data-id="ITEM0001">
        <div class="logo"></div>
        <div class="content">
          <p class="title">商品 1</p>
          <p class="price">￥30</p>
        </div>

        <p class="count">0</p>
        <div class="add">+</div>
      </div>
      <div class="item" data-id="ITEM0013">
        <div class="logo"></div>
        <div class="content">
          <p class="title">商品 2</p>
          <p class="price">￥50</p>
        </div>
        
        <p class="count">0</p>
        <div class="add">+</div>
      </div>
    </div>
    <div class="bottom">
      <div class="title">购物车</div>
      <div class="priceTotal">￥0</div>
      <div class="clean">清空</div>
      <div class="settlement">结算</div>
    </div>
  </div>
</body>
<style lang="less">
  .shopMall {
    width: 300px;
    height: 310px;
    margin: 0 auto;
    background-color: #FFD452;
  }

  .shopDetail {
    position: relative;
    height: 150px;
  }
  .shopDetail .title {
    font-weight: 900;
    width: 64px;
    left: 116px;
    font-size: 16px;
    position: absolute;
    bottom: 10px;
    margin: 0;
  }
  .shopList .item {
    position: relative;
    display: flex;
    background-color: #fff;
    margin-bottom: 2px;
  }
  .shopList .item .logo {
    width: 80px;
    height: 80px;
    background-color: #F9B776;
    margin-right: 10px;
  }
  .shopList .item .content {
    width: 80px;
    height: 80px;
    margin: 0;
    display: block;
  }
 .item .content .price{
   font-size: 14px;
 }
  .shopList .item .add {
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background-color: #FFD452;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .count{
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 12px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    position: absolute;
    right: 7px;
    bottom: 13px;
    z-index: 1;
  }
  .bottom {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    font-size: 14px;
    background-color: #000;
    border-radius: 30px;
    display: flex;
    color: #EBDDCA;
    margin-top: 200px;
  }
  .bottom .title{
    padding-right: 5px;
    border-right: 2px solid #EBDDCA;
  }
  .priceTotal{
    margin-left: 10px;
    color: #787878;
  }
  .clean{
    color: #787878;
    margin-left: 120px;
    margin-right: 10px;
  }
  .settlement{
    color: #787878;
  }
</style>
<script>
  window.onload=function(){
    let add = document.getElementsByClassName('add')  //点击+
    let count = document.getElementsByClassName('count')
    let priceTotal = document.getElementsByClassName('priceTotal')
    add[0].onclick=function(){
      let p = ++ count[0].innerHTML
      let p1 = count[1].innerHTML
      // console.log(priceTotal);
      priceTotal[0].innerHTML = p*30 + p1*50
    }
    add[1].onclick=function(){
      let p1 = count[0].innerHTML
      let p = ++ count[1].innerHTML
      priceTotal[0].innerHTML = p*50 + p1*30
    }
  }
</script>
</html>